<template>
	<div>
		<!-- 数据统计 -->
		<el-row :gutter="20">
			<el-col :span="6"
			v-for="(item, index) in counts" :key="index">
				<el-card class="box-card" shadow="hover">
					<div class="d-flex align-items-center">
						<i class=" h4 mb-0 text-white text-center mr-3"
						:class="[item.icon, item.color]"
						style="width: 40px;height: 40px;line-height: 40px;"></i>
						<div>
							<h4 class="mb-1">{{item.num}}</h4>
							<small class="text-muted">{{item.desc}}</small>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 店铺、订单提示 | 统计图-->
		<el-row :gutter="20" class="mt-3">
			<el-col :span="12" class="d-flex flex-column"
			style="height: 370px; justify-content: space-between;">
				<el-card class="box-card" shadow="never"
				v-for="(item,index) in tips" :key="index">
					<div slot="header" class="clearfix">
						<span>{{item.title}}</span>
						<el-button style="float: right;padding: 3px 0;">
							{{item.desc}}
						</el-button>
					</div>
					<div class="row">
						<div :class="item.list.length|getColClass" 
						v-for="(item2, index2) in item.list" :key="index2">
							<button class="btn btn-light w-100"
							style="padding-left: 1px; padding-right: 1px;">
								<h4 class="mb-1">{{item2.value}}</h4>
								<small><small class="text-muted">{{item2.name}}</small></small>
							</button>
						</div>
					</div>
				</el-card>
				
			</el-col>
			<!-- 统计图 -->
			<el-col :span="12" >
				<el-card class="box-card" shadow="never" 
				style="height: 370px;">
					<div slot="header" class="clearfix">
						<span>卡片名称</span>
						<el-button style="float: right;padding: 3px 0;">
							
						</el-button>
					</div>
					<!-- 统计图标 -->
					<div ref="myChart" style="width: 100%;height: 270px;">
						
					</div>
				</el-card>
			</el-col>
		</el-row>
		
		<!-- 销售情况统计 | 单品销售排名 -->
		<el-row :gutter="20" class="my-3">
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>卡片名称</span>
						<el-button style="float: right; padding: 3px 0" type="text">销量订单金额统计</el-button>
					</div>
					<div class="media align-items-center border">
						<span class=" border-right py-4 px-3 bg-light">昨日销量</span>
						<div class="media-body">
							<div class="border-bottom pl-3 pb-1 mb-2">
								<span>订单量(件)</span>12 
							</div>
							<div class="pl-3">
								<span>订单金额(元)</span>120 
							</div>
						</div>
					</div>
					<div class="media align-items-center border mt-3">
						<span class=" border-right py-4 px-3 bg-light">本月销量</span>
						<div class="media-body">
							<div class="border-bottom pl-3 pb-1 mb-2">
								<span>订单量(件)</span>120 
							</div>
							<div class="pl-3">
								<span>订单金额(元)</span>1200
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>单品销售排名</span>
						<el-button style="float: right; padding: 3px 0" type="text">订单量和订单金额统计</el-button>
					</div>
					<el-table
					    :data="tableData"
					    height="250"
					    border
					    style="width: 100%">
						<el-table-column type="index" label="排名" width="50"></el-table-column>
						<el-table-column prop="name" label="商品信息"></el-table-column>
						<el-table-column prop="num" label="销量" width="50"></el-table-column>
					  </el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import echarts from "echarts"
	
	export default {
		//mounted dom渲染完毕的时候
		mounted() {
			//画统计图
			this.drawLine()
		},
		
		methods: {
			drawLine() {
				//初始化echarts实例
				let a = echarts.init(this.$refs.myChart)
				//配置参数
				a.setOption(
					{
					    title: {},
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'cross',
					            label: {
					                backgroundColor: '#6a7985'
					            }
					        }
					    },
					    legend: {
					        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
					    },
					    toolbox: {
					        feature: {
					            saveAsImage: {}
					        }
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: [
					        {
					            type: 'category',
					            boundaryGap: false,
					            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					        }
					    ],
					    yAxis: [
					        {
					            type: 'value'
					        }
					    ],
					    series: [
					        {
					            name: '邮件营销',
					            type: 'line',
					            stack: '总量',
					            areaStyle: {},
					            data: [120, 132, 101, 134, 90, 230, 210]
					        },
					        {
					            name: '联盟广告',
					            type: 'line',
					            stack: '总量',
					            areaStyle: {},
					            data: [220, 182, 191, 234, 290, 330, 310]
					        },
					        {
					            name: '视频广告',
					            type: 'line',
					            stack: '总量',
					            areaStyle: {},
					            data: [150, 232, 201, 154, 190, 330, 410]
					        },
					        {
					            name: '直接访问',
					            type: 'line',
					            stack: '总量',
					            areaStyle: {},
					            data: [320, 332, 301, 334, 390, 330, 320]
					        },
					        {
					            name: '搜索引擎',
					            type: 'line',
					            stack: '总量',
					            label: {
					                normal: {
					                    show: true,
					                    position: 'top'
					                }
					            },
					            areaStyle: {},
					            data: [820, 932, 901, 934, 1290, 1330, 1320]
					        }
					    ]
					}
				)
			}
		},
		
		filters: {
			getColClass(total) {
				if(total >= 1) {
					return `col-${12 / total}`
				}
				return 'col-3'
			}
		},
		
		data() {
			return {
				counts: [
					{
						icon:'el-icon-user-solid',
						num:'30',
						desc:'关注人数',
						color: 'bg-primary'
					},
					{
						icon:'el-icon-s-finance',
						num:'200',
						desc:'订单总笔数',
						color: 'bg-success'
					},
					{
						icon:'el-icon-user-solid',
						num:'30',
						desc:'关注人数',
						color: 'bg-danger'
					},
					{
						icon:'el-icon-s-order',
						num:'2000',
						desc:'本月销量',
						color: 'bg-warning'
					}
				],
				tips: [
					{
						title:'店铺及商品提示',
						desc:'您需要关注的店铺信息以及待处理事项',
						list:[
							{name: '出售中', value:'64'},
							{name: '待回复', value:'10'},
							{name: '库存预警', value:'0'},
							{name: '仓库中', value:'3'},
						]
					},
					{
						title:'交易提示',
						desc:'交易提示',
						list: [
							{name: '出售中', value:'64'},
							{name: '待回复', value:'10'},
							{name: '库存预警', value:'0'},
							{name: '仓库中', value:'3'},
							{name: '库存预警', value:'0'},
							{name: '仓库中', value:'3'},
						]
					}
				],
				tableData: [
					{
						name: '小天鹅滚筒洗衣机1',
						num: '20',
					},
					{
						name: '小天鹅滚筒洗衣机2',
						num: '17',
					},
					{
						name: '小天鹅滚筒洗衣机3',
						num: '10',
					},
					{
						name: '小天鹅滚筒洗衣机4',
						num: '9',
					},
					{
						name: '小天鹅滚筒洗衣机5',
						num: '8',
					},
				]
			}
		}
	}
</script>

<style>
</style>
